<template>
  <div>
    <ul v-if="list.length" class="list">
      <li>
        <img src="../../../static/mine/book.jpg" alt="">
        <div class="info">
          <div class="name">平视姚明</div>
          <div class="author">王猛</div>
          <div class="pri">
            <span>回收价</span>
            <span>￥30.10</span>
            <span>2.7折</span>
          </div>
        </div>
        <div class="remove" @click="removeWish(1)">移除</div>
      </li>
      <li>
        <img src="../../../static/mine/book.jpg" alt="">
        <div class="info">
          <div class="name">平视姚明</div>
          <div class="author">王猛</div>
          <div class="pri">
            <span>回收价</span>
            <span>￥30.10</span>
            <span>2.7折</span>
          </div>
        </div>
        <div class="remove">移除</div>
      </li>
    </ul>
    <div v-else class="hasnolist">
      暂无我想要的
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: '0',
      list: [1],
      page: 1
    }
  },
  onLoad() {
    this.getWish()
  },
  methods: {
    getWish() {
      let data = {
        page: this.page,
        pageSize: 8,
      }
      this.$http.get('/customer/wx/wish', data).then(res => {
        this.list = this.list.concat(res.data)
        this.page++
      })
    },
    removeWish(index) {
      this.$http.post('/customer/wx/egg', { wishId: this.list[index].id }, "DELETE").then(res => {
        this.list.splice(index, 1)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
    padding: 18rpx;
    li {
        display: flex;
        box-sizing: border-box;
        padding: 30rpx;
        height: 185rpx;
        border-bottom: 1rpx solid #eee;
        .remove {
            align-self: flex-end;
            width: 110rpx;
            height: 44rpx;
            color: #666;
            font-size: 24rpx;
            line-height: 44rpx;
            text-align: center;
            border-radius: 5rpx;
            border: 1rpx solid #666;
        }
        img {
            margin-right: 30rpx;
            height: 125rpx;
            width: 90rpx;
        }
        .info {
            flex-grow: 1;
            height: 125rpx;
            width: 400rpx;
            .name {
                font-size: 32rpx;
                height: 40rpx;
                vertical-align: top;
            }
            .author {
                height: 40rpx;
                font-size: 24rpx;
                color: #666;
            }
            .pri {
                display: flex;
                align-items: center;
                height: 45rpx;
                font-size: 24rpx;
                & > span:first-child {
                    margin-right: 10rpx;
                    color: #999;
                }
                & > span:nth-child(2) {
                    margin-right: 10rpx;
                    padding: 5rpx 10rpx;
                    color: #fff;
                    border-radius: 5rpx;
                    background-color: #cb5151;
                }
                & > span:last-child {
                    color: #cb5151;
                }
            }
        }
    }
}
.hasnolist {
    text-align: center;
    margin-top: 200rpx;
    font-size: 28rpx;
    color: #666;
}
</style>

